<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utg-8">
<title>药品进库</title>
</head>
<body>
<div class="panel panel-info">

    <div class="panel-heading">
        <h3 class="panel-title">药品入库</h3>
    </div>
    
    <div class="panel-body">
			<div class="form-group">
				<select id="supplier_select" class="form-control">
				</select>
			</div>

			<div class="form-group" id="storage_scan">
				<input id="scan" autofocus @keyup.enter="enter" v-model= "traceCode"
					class="form-control" type="text" placeholder="请扫描药品追溯码" />
			</div>
			<table id="medicine_storage_table">
			</table>
		</div>
		
</div>

<button type="button" class="btn btn-info pull-right" onclick="submit()">提交</button>
 
</body>
<script type="text/javascript">


	var data = storageData;
	
	var submit = function(){
		if(data.length == 0){
			speak("无可提交数据");
		}else{
			if($("#supplier_select").val() == undefined){
					speak('请先选择供应商');
					return ;
			}
			showStoragePrice(data,$("#supplier_select").val(),$('#supplier_select').find("option:selected").text());
		}
	}
	
	new Vue({
		el : '#storage_scan',
		data:{
			traceCode : ''
		},
		methods:{
			enter : function(){
				if($("#supplier_select").val() == undefined){
					speak('请先选择供应商');
					this.traceCode = '';
					return ;
				}
				if(this.traceCode.replace(/\D/g, '').length < 24){
						speak("输入有误");
						this.traceCode = '';
						return;
				}
				//检查是否为同一箱子的重复扫描
				for (var i = 0; i < data.length; i++) {
					if (this.traceCode.startsWith(data[i].traceCode)) {
						this.traceCode = '';
						speak('箱子已扫描');
						return;
					}
				}
				$.ajax({
					url : "<%=request.getContextPath()%>/ms/traceCode/process/" + $("#supplier_select").val(),
					contentType : 'application/json',
					data : JSON.stringify({
						traceCode : this.traceCode
					}),
					type : "post",
					success : function(result) {
						if (result.traceCode == "0") {
							speak('箱子已入库');
						} else if (result.traceCode == "-1") {
							speak('自动添加药品出错，请手动添加药品');
							$.ajax({
								url : "<%=request.getContextPath()%>/m/add",
								success : function(result) {
									dialog.showDialog(result);
								}
							});
						} else {
							data.push(result);
							$("#medicine_storage_table").bootstrapTable("refresh");
							speak('入库成功');
						}
					}
				});
				this.traceCode = '';
			}	
		}
	});
	
	$("#supplier_select").select2({
      ajax: {
        url: "<%=request.getContextPath()%>/Supplier",
        type:'GET',
        dataType: 'json',
        cache: true,
        processResults: function (data, params) {
      		var itemList = [];//当数据对象不是{id:0,text:'ANTS'}这种形式的时候，可以使用类似此方法创建新的数组对象
            $.each(data, function(index, item){
            	itemList.push({id: item.id, text: item.name});
            });
        	return {
          		results : itemList,
          		pagination: {
              		more: false
            	}
         	};
      	}
      },
      placeholder:'请选择供应商',//默认文字提示
      language: "zh-CN",
    });
    
	$("#medicine_storage_table").bootstrapTable({ // 对应table标签的id
	  method:"get",
      url: "<%=request.getContextPath()%>/m/nothing", // 获取表格数据的url
      cache: false, // 设置为 false 禁用 AJAX 数据缓存， 默认为true
      striped: true,  //表格显示条纹，默认为false
      search:true,
      pagination: true, // 在表格底部显示分页组件，默认false
      pageList: [5,10, 20,50], // 设置页面可以显示的数据条数
      pageSize: 10, // 页面数据条数
      pageNumber: 1, // 首页页码
      sidePagination: 'client', // 设置为服务器端分页
      columns: [
          {
              field: 'traceCode', // 返回json数据中的name
              title: '追溯码', // 表格表头显示文字
              align: 'center', // 左右居中
              valign: 'middle'// 上下居中
              
          }, {
              field: 'medicineName',
              title: '药品名称',
              align: 'center',
              valign: 'middle'
          },{
              title: "操作",
              align: 'center',
              valign: 'middle',
              formatter: function (value, row, index) {
                  return '<button class="btn btn-default btn-sm" onclick="withdraw(\'' + row.index + '\')">撤回</button>';
              }
          }
          
      ],
      responseHandler:function (res) {
      			var result = data.slice();
                return data;
      }
});

var withdraw = function(index){
	data.splice(index, 1);
	$("#medicine_storage_table").bootstrapTable("refresh");
}

</script>

</html>